簡(jiǎn)介:今天就給大家完整的講解一個(gè)移動(dòng)端dialog組件的開(kāi)發(fā)全過(guò)程,抽絲剝繭,去分析一個(gè) Dialog 組件的種種功能,通過(guò)組件化,參數(shù)可配置化的方式,給大家集成封裝一個(gè)相對(duì)完美的 Dialog對(duì)話框組件。
第1章 課程準(zhǔn)備
本章節(jié)演示Dialog組件的使用以及課程的知識(shí)儲(chǔ)備。
第2章 Dialog 組件的 DOM 結(jié)構(gòu)、CSS 樣式的搭建
本章節(jié)講解Dialog組件的DOM結(jié)構(gòu)如何劃分、配合結(jié)構(gòu)初始化基本的CSS樣式。
第3章 JS實(shí)戰(zhàn)開(kāi)發(fā)
本章節(jié)講解組件的參數(shù)配置和相關(guān)的功能開(kāi)發(fā)。
第4章 簡(jiǎn)單優(yōu)化圖片資源(擴(kuò)展了解)
本章做一個(gè)圖片資源的優(yōu)化,用Base64和css3的方式替代圖片資源。
第5章 參數(shù)擴(kuò)展及Bug解決
本章講解額外參數(shù)功能擴(kuò)展和一些bug的處理。
第6章 課程總結(jié)和組件實(shí)際項(xiàng)目演示
本章總結(jié)一下本期課程,通過(guò)一個(gè)購(gòu)物車操作的實(shí)際項(xiàng)目,檢驗(yàn)下Dialog組件的使用場(chǎng)景。